<!-- 搜索表单 -->
<template>
  <el-form
    ref="editForm"
    :label-width="labelWidth"
    :model="editData"
    :rules="editRules"
    :size="size"
  >
    <el-form-item
      v-for="item in editCfg"
      :key="item.label"
      :label="item.label"
      :prop="item.prop"
    >
      <!-- 输入框 -->
      <el-input
        v-if="item.type === 'input'"
        v-model="editData[item.prop]"
        :placeholder="'请填写' + item.label"
        :disabled="item.disabled && item.disabled(editData)"
        :style="{ width: item.width }"
        @input="item.input && item.input(editData[item.prop])"
        @blur="item.blur && item.blur(editData[item.prop])"
        @change="item.change && item.change(editData[item.prop])"
      />
      <!-- 密码框 -->
      <el-input
        v-if="item.type === 'password'"
        v-model="editData[item.prop]"
        type="password"
        :placeholder="'请填写' + item.label"
        :disabled="item.disabled && item.disabled(editData)"
        :style="{ width: item.width }"
        @change="item.change && item.change(editData[item.prop])"
      />
      <!-- 文本域 -->
      <el-input
        v-if="item.type === 'textarea'"
        v-model="editData[item.prop]"
        type="textarea"
        :disabled="item.disabled && item.disabled(editData)"
        :style="{ width: item.width }"
        @change="item.change && item.change(editData[item.prop])"
      />
      <!-- 下拉框 -->
      <el-select
        v-if="item.type === 'select'"
        v-model="editData[item.prop]"
        :disabled="item.disabled && item.disabled(editData)"
        :style="item.style"
        @change="item.change && item.change(editData[item.prop])"
      >
        <el-option
          v-for="op in item.options"
          :key="op.value"
          :label="op.label"
          :value="op.value"
        />
      </el-select>
      <!--自定义select-->
      <el-select
        v-if="item.type === 'selectDiy'"
        v-model="editData[item.prop]"
        :disabled="item.disabled && item.disabled(editData)"
        :style="item.style"
        @change="item.change && item.change(editData[item.prop])"
      >
        <el-option
          v-for="op in item.options"
          :key="op.value"
          :label="op.label"
          :value="op.value"
        >
          <div>
            {{ op.label }}
            <span style="float: right"><i :class="op.value" /></span>
          </div>
        </el-option>
      </el-select>
      <!-- 单选 -->
      <el-radio-group
        v-if="item.type === 'radio'"
        v-model="editData[item.prop]"
        :disabled="item.disabled && item.disabled(editData)"
        @change="item.change && item.change(editData[item.prop])"
      >
        <el-radio v-for="ra in item.radio" :key="ra.value" :label="ra.value">
          {{ ra.label }}
        </el-radio>
      </el-radio-group>
      <!-- 单选按钮 -->
      <el-radio-group
        v-if="item.type === 'radioButton'"
        v-model="editData[item.prop]"
        :disabled="item.disabled && item.disabled(editData)"
        @change="item.change && item.change(editData[item.prop])"
      >
        <el-radio-button
          v-for="ra in item.radios"
          :key="ra.value"
          :label="ra.value"
        >
          {{ ra.label }}
        </el-radio-button>
      </el-radio-group>
      <!-- 复选框 -->
      <el-checkbox-group
        v-if="item.type === 'checkbox'"
        v-model="editData[item.prop]"
        :disabled="item.disabled && item.disabled(editData)"
        @change="item.change && item.change(editData[item.prop])"
      >
        <el-checkbox
          v-for="ch in item.checkbox"
          :key="ch.value"
          :label="ch.value"
          size="medium"
          style="width: 100%"
        >
          {{ ch.label }}
        </el-checkbox>
      </el-checkbox-group>
      <!-- 日期 -->
      <el-date-picker
        v-if="item.type === 'date'"
        v-model="editData[item.prop]"
        :disabled="item.disabled && item.disabled(editData)"
        @change="item.change && item.change(editData[item.prop])"
      />
      <!-- 时间 -->
      <el-time-select
        v-if="item.type === 'time'"
        v-model="editData[item.prop]"
        type=""
        :disabled="item.disabled && item.disabled(editData)"
        @change="item.change && item.change(editData[item.prop])"
      />
      <!-- 日期时间 -->
      <el-date-picker
        v-if="item.type === 'dateTime'"
        v-model="editData[item.prop]"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        :disabled="item.disable && item.disable(editData[item.prop])"
        @change="item.change && item.change(editData[item.prop])"
      />
      <!--时间范围-->
      <el-date-picker
        v-if="item.type === 'datePicker'"
        v-model="editData[item.prop]"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
      />
      <!-- 滑块 -->
      <!-- <el-slider v-if="item.type==='Slider'" v-model="editData[item.prop]"></el-slider> -->
      <!-- 开关 -->
      <el-switch
        v-if="item.type === 'switch'"
        v-model="editData[item.prop]"
        :disabled="item.disabled && item.disabled(editData)"
        @change="item.change && item.change(editData[item.prop])"
      />
      <!-- 单图片 -->
      <div v-if="item.type === 'image'">
        <el-upload
          class="avatar-uploader"
          action="#"
          :show-file-list="false"
          :on-success="onSuccessUpload"
          :http-request="
            (file) => {
              return beforeUpload(file, item);
            }
          "
        >
          <el-image
            v-if="editData[item.prop]"
            :src="editData[item.prop]"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
        <p>{{ item.tips }}</p>
      </div>
      <!--自定义-->
      <slot v-if="item.type === 'slot'" :name="item.slot" />
    </el-form-item>

    <el-form-item style="text-align: right">
      <el-button
        v-if="action === 'notice'"
        type="warning"
        @click="submitTime"
      >定时发布
      </el-button>
      <el-button type="primary" @click="submit"> 确认 </el-button>
      <el-button @click="cancel"> 取消 </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import api from '@/api'

export default {
  inject: ['parents'],
  props: {
    labelWidth: {
      type: String,
      default: '120px'
    },
    size: {
      type: String,
      default: 'small'
    },
    editCfg: {
      type: Array,
      default: () => []
    },
    editData: {
      type: Object,
      default: () => {
      }
    },
    editRules: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      that: this,
      action: ''
    }
  },
  mounted() {
    this.action = this.parents.action
  },
  methods: {
    submitTime() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          this.$emit('submitFunc', 1)
        }
      })
    },
    submit() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          this.$emit('submitFunc', 0)
        }
      })
    },
    resetForm() {
      this.$refs['editForm'].resetFields()
    },
    clearValidate() {
      console.log(1111)
      this.$refs['editForm'].clearValidate()
    },
    cancel() {
      this.resetForm()
      this.parents.handleClose()
    },
    // 图片上传成功回调
    onSuccessUpload(response, file) {
      console.log(response, file)
    },
    // 上传前准备
    beforeUpload(file, item) {
      // eslint-disable-next-line no-undef,no-unused-vars
      return new Promise(function(resolve, reject) {
        const width = item.options.width
        const height = item.options.height
        const _URL = window.URL || window.webkitURL
        const img = new Image()
        img.onload = function() {
          const valid = img.width >= width && img.height >= height
          valid ? resolve() : resolve()
        }
        img.src = _URL.createObjectURL(file.file)
      }).then(() => {
        const fd = new FormData() // 通过form数据格式来传
        fd.append('file', file.file) // 传文件
        fd.append('directory', item.folder) // 文件存放目录
        api.upload(fd).then(response => {
          this.$emit('uploadFunc', response)
          // this.tableData[index].image = response.url
        })
        return file
      }, () => {
        this.$message.error(`上传的图片尺寸必须是${item.options.width} * ${item.options.height}`)
        // eslint-disable-next-line no-undef
        return Promise.reject()
      })
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.el-input-group__append {
  width: 102px;
  text-align: center;
}
</style>
